<template>
	<view class="allOrders">
		<header class="tab">
			<view class="tabItem" :class="{'active' : index == current}" @click="clickTab(index,item.type)"
				v-for="(item,index) in tabItemList" :key="index">
				{{item.name}}
			</view>
		</header>

		<footer class="orderList Column">
			<view v-if="recordList.length != 0">
				<view class="goods" v-for="(item,index) in recordList" :key="index">
					<!-- <view class="goods_head Row">
						<view class="title">1</view>
						<view class="status">待发货</view>
					</view> -->
					<view class="goods_cont Column">
						<view class="goodsName">
							<view class="">卡号 {{item.bankcard}}</view>
							<view class="total" v-if="current == 0">{{item.signStatus == 0 ? '未签约' : '已签约'}}</view>
							<view class="total" v-else>{{item.orderStatus}}</view>
						</view>

						<view class="" v-if="current == 1">
							<view class="time Row">
								<view class="timeText">提现时间</view>
								<view class="timeNum">{{item.data}}</view>
							</view>
							<view class="money Row">
								<view class="text">提现金额</view>
								<h3 style="color: #000;">{{item.money}}</h3>
							</view>
						</view>

						<view class="goodsMoney Row">
							<view class="del" :data-id="item.id" @click="deleteSignUp(item.id)" v-if="current == 0">
								删除银行卡
							</view>
							<view class="flush" v-if="current == 0" @click="withdrawQuerySignUp" :data-Param="0"
								:data-signUpId="item.id">刷新</view>
							<view class="flush" v-if="current == 1" @click="withdrawQuerySignUp" :data-Param="1"
								:data-signUpId="item.id">刷新</view>
							<view class="withdraw" :data-id="item.id" @click="openPopup" v-if="item.signStatus == 1">去提现
							</view>
						</view>
					</view>
				</view>

				<view class="reminder">温馨提示：点击删除银行卡，确认后。若无法正常显示，点击右上角 ... ，找到刷新并点击，可正常显示。</view>
			</view>

			<view class="history" v-else>
				暂无数据~
			</view>
		</footer>

		<u-popup customStyle="width:80%;" :round="5" :show="show" mode="center" @close="close" @open="open">
			<view class="popup">
				<view class="popup_title">提现到银行卡</view>
				<view class="popup_content Row">
					<input class="input" type="number" :value="money" placeholder="请输入提现金额" data-name="money"
						@input="input" />
					<view class="btn" @click="getUserInfo()">全部提现</view>
				</view>
				<view class="popup_foot Column">
					<button :disabled="isButtonDisabled" class="btn affirm" @click="affirm">确认</button>
					<view class="btn cancel" @click="close">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				currentType: 'signed',
				tabItemList: [{
						'name': '我的银行卡',
						'type': 'signed'
					},
					{
						'name': '提现记录',
						'type': 'withdraw'
					}
				],

				show: false,
				money: "",
				id: '',

				recordList: [],

				isButtonDisabled: false, //提现按钮

				current_page: 1,
				last_page: 1
			}
		},
		onLoad(e) {
			this.getInfo("signed");
		},

		methods: {
			deleteSignUp(id) {
				let that = this;
				uni.showModal({
					title: '确认删除？',
					confirmColor: "#ea1f17",
					success: function(res) {
						if (res.confirm) {
							uni.$u.http.post('/stb.withdraw/deleteSignUp', {
								signup_id: id // 签约记录ID
							}).then(res => {
								if (res.code == 0) {
									uni.$u.toast(res.msg);
									return;
								}
								uni.$u.toast('删除成功');
								that.getInfo("signed");
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			DateFormat(string) {
				let timestamp = string * 1000; // 转换为毫秒  
				// 创建一个Date对象  
				let date = new Date(timestamp);
				// 提取年月日  
				let year = date.getFullYear();
				let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要+1，并使用padStart来确保是两位数  
				let day = String(date.getDate()).padStart(2, '0'); // 使用padStart来确保是两位数
				const hours = String(date.getHours()).padStart(2, '0'); // 补零  
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零  
				const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零  

				// 格式化输出  
				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedDate; // 输出类似 "2027-02-19"（注意：这个日期是基于假设的时间戳值）
			},

			affirm() {
				let that = this;
				if (that.money == '') {
					uni.$u.toast("提现金额不能为空")
					return false;
				}
				that.isButtonDisabled = true;
				uni.$u.http.post('/stb.withdraw/withdrawApply', {
					id: that.id,
					money: that.money
				}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg)
						return false;
					}
					uni.$u.toast("提现成功");
					setTimeout(function() {
						that.close()
					}, 1000)
				}).catch(err => console.log(err.msg))
			},
			getUserInfo() {
				let that = this;
				uni.$u.http.post('/user/getUserInfo').then(res => {
					that.money = res.data.userinfo.money;
				}).catch(err => console.log(err.msg))
			},

			input(e) {
				let Val = e.detail.value.trim();
				this.money = Val;
			},
			openPopup(e) {
				this.id = e.currentTarget.dataset.id;
				this.show = true;
			},
			open() {
				this.show = true;
			},
			close() {
				this.money = '';
				this.show = false;
				this.isButtonDisabled = false;
			},
			clickTab(cur, type) {
				this.current = cur;
				this.currentType = type;

				//切换后的业务逻辑
				if (cur == 0) {
					this.current_page = 1;
					this.last_page = 1;
					this.recordList = [];
					this.getInfo("signed")
				} else {
					this.current_page = 1;
					this.last_page = 1;
					this.recordList = [];
					this.getInfo()
				}
			},

			getInfo(Param) {
				let that = this,
					pathUrl = "";
				if (Param == "signed") {
					pathUrl = "/stb.withdraw/signUpList"
				} else {
					pathUrl = "/stb.withdraw/withdrawList"
				}
				if (that.current_page > that.last_page) {
					return false;
				}
				uni.$u.http.get(pathUrl, {
					page: that.current_page
				}).then(res => {
					if (res.code == 1) {
						let array = res.data.list.data;
						array.forEach(e => {
							e.data = that.DateFormat(e.createtime)
							that.recordList.push(e)
						})
						that.last_page = res.data.list.last_page;
					}
				}).catch(err => console.log(err))
			},
			
			withdrawQuerySignUp(e) {
				let that = this,
					url = "",
					data;
				let signUpId = e.currentTarget.dataset.signupid;
				let Param = e.currentTarget.dataset.param;
				if (Param == 0) {
					url = '/stb.withdraw/querySignUp';
					data = {
						signUpId: signUpId, // 签约记录ID
					}
				} else {
					url = '/stb.withdraw/withdrawQuery';
					data = {
						withdrawId: signUpId, // 提现记录ID
					}
				}
				uni.$u.http.post(url, data).then(res => {
					this.current_page = 1;
					this.last_page = 1;
					this.recordList = [];
					if (Param == 0) {
						this.getInfo("signed")
					} else {
						this.getInfo()
					}
				}).catch(err => console.log(err))
			},
		},

		onReachBottom() {
			let that = this;
			that.current_page++;
			that.getInfo()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.allOrders {
		width: 100%;

		.popup {
			width: 100%;
			justify-content: center;
			align-items: center;

			&_title {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 8rpx 8rpx 0 0;
				background: linear-gradient(to right, #3D5EEA, #14A4EA);
				padding: 30rpx 0;
			}

			&_content {
				width: 90%;
				justify-content: center;
				margin: 0 auto;
				padding: 60rpx 0;

				.input {
					width: 370rpx;
					text-align: center;
					padding: 6px 0 10rpx 0;
					border-bottom: 2rpx solid #e0e0e0;
				}

				.btn {
					color: #0384FC;
					font-size: 28rpx;
					border-radius: 6rpx;
					border: 2rpx solid #0384FC;
					padding: 12rpx 16rpx;
				}
			}

			&_foot {
				width: 100%;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;

				.affirm {
					height: 40px;
					color: #fff;
					border-radius: 4rpx;
					background-color: #0056FF;
					font-size: 16px;
				}

				.cancel {
					color: #a0a0a0;
					border-radius: 4rpx;
				}

				.btn {
					width: 90%;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 18rpx 0;
				}
			}
		}

		.tab {
			display: flex;
			background-color: #fff;

			.tabItem {
				color: #7E7E9A;
				width: 100%;
				text-align: center;
				padding: 14rpx 0;
			}

			.active {
				color: #0056FF;
				font-weight: bold;
			}
		}

		.orderList {
			width: 94.6%;
			padding: 20rpx;

			.history {
				height: 85vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.goods:first-child {
				margin: 0;
			}

			.reminder {
				color: #7E7E9A;
				font-size: 15px;
				margin-top: 12px;
			}

			.goods {
				background-color: #fff;
				border-radius: 6px;
				padding: 12px;
				margin-top: 10px;
				overflow: hidden;
				position: relative;

				.goods_head {
					font-size: 0rpx;
					justify-content: space-between;

					.title {
						font-weight: 550;
					}

					.status {
						color: #7E7E9A;
					}
				}

				.goods_cont {
					width: 100%;
					justify-content: space-between;
					// margin-top: 20rpx;

					.goodsName,
					.money,
					.time {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

					}

					.timeText {
						color: #7E7E9A;
					}

					.timeNum {
						color: #7E7E9A;
					}

					.goodsName {
						font-size: 30rpx;
						flex-direction: row;

						.total {
							color: #0056FF;
						}
					}

					.time {
						border-top: 1px dashed #7E7E9A;
						padding-top: 12px;
						margin-top: 12px;
					}

					.money {

						.text {
							color: #7E7E9A;
						}
					}

					.goodsMoney {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						padding: 12px 0 0;

						.del {
							color: #ea1f17;
							border: 1px solid #ea1f17;
							border-radius: 6rpx;
							padding: 4px 16px;
							margin-right: 10px;
						}

						.flush {
							color: #0056FF;
							border: 2rpx solid #0056FF;
							border-radius: 6rpx;
							padding: 4px 18px;
						}

						.withdraw {
							color: #fff;
							background-color: #0056FF;
							border: 2rpx solid #0056FF;
							border-radius: 6rpx;
							padding: 4px 40rpx;
							margin-left: 20rpx;
						}

						.money {
							font-size: 36rpx;
							font-weight: 550;
						}

						.total {
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>